<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示js字符串String的内置方法</title>
	</head>
	<body>
		<div id="box">
			
		</div>
		
		<div id="box2">
		</div>
		<script type="text/javascript">
			function showString(pTxt, pResult){
				document.write(pTxt + "的计算结果是:" + pResult);
				document.write("<br />");
			}
			
			var str1 = "abcdEfGGfeDDcba";
			
			// 使用字符串作为a标签的内容来生成锚点的html代码
			var result = str1.anchor("a1");
			
			document.write("原始字符串, str1=" + str1);
			document.write("<br />");
			var divBox = document.getElementById("box");
			var divBox2 = document.getElementById("box2");
			divBox.innerHTML = result;
			divBox2.innerText = result;
			// 输出生成的html代码
			showString("str1.anchor", result);
			
			// str1d的第0个字符
			showString("str1.charAt(0)", str1.charAt(0));
			showString("str1.charAt(3)", str1.charAt(3));
			
			//  连接两个或多个字符串.与字符串与其他类型相加的结果类似
			result = str1.concat('abc', 'cedd', 55, null, undefined, [1,2,3]);
			showString("str1.concat('abc', 'cedd', 55, null, undefined, [1,2,3])", result);
			
			// indexOf在字符串中找到传入的字符串.则返回字符串起始位置的索引(下标)
			result = str1.indexOf("cde");
			showString("str1.indexOf('cde')", result);
			result = str1.indexOf("abc");
			showString("str1.indexOf('abc')", result);
			
			// indexOf在字符串中找不到输入的字符.则返回-1
			result = str1.indexOf("流氓");
			showString("str1.indexOf('流氓')", result);
			showString("str1.indexOf('氓')", result);
			
			
			
			// lastIndexOf在字符串中找到传入的字符串.则返回字符串起始位置的索引(下标)
			result = str1.lastIndexOf("cde");
			showString("str1.lastIndexOf('cde')", result);
			result = str1.lastIndexOf("a");
			showString("str1.lastIndexOf('a')", result);
			
			// lastIndexOf在字符串中找不到输入的字符.则返回-1
			result = str1.lastIndexOf("流氓");
			showString("str1.lastIndexOf('流氓')", result);
			showString("str1.lastIndexOf('流')", result);
			
			var str2 = "台湾是中国不可分割的一部分！";
			document.write("第二个字符串是：" + str2 + "<br />");
			result = str2.lastIndexOf("分割");
			showString("str2.lastIndexOf('分割')", result);
			result = str2.lastIndexOf("的");
			showString("str2.lastIndexOf('的')", result);
			result = str2.lastIndexOf("中国不分割");
			showString("str2.lastIndexOf('中国不分割')", result);
			
			document.write("replace计算之前。str1=" + str1 + "<br />");
			
			// replace会把str1中的abc替换为字母
			result = str1.replace("abc", "字母");
			document.write("replace计算之后。str1=" + str1 + "<br />");
			showString("str1.replace('abc', '字母')", result);
			result = 'abcdefgaaa'.replace('a', '字母');
			// replace只会替换匹配到的第一个结果
			showString("'abcdefgaaa'.replace('a', '字母')", result);
			
			// slice方法可以使用索引对字符串切片
			// 从指定的起始索引开始截取字符串.直到指定的结束索引之前
			// 以下代码从str1中截取索引3位置的字符直到索引5的字符之前
			result = str1.slice(3, 5);
			showString("str1.slice(3, 5)", result);
			
			var str4 = "1,2,3,4,5,6";
			// 使用逗号.对字符串进行分隔.组成一个数组返回
			// 返回结果为 [1,2,3,4,5,6]
			var strList = str4.split(",");
			console.log(strList);
			
			var str5 = "123456";
			// 使用空字符当做 split的参数时.会把字符串每一个字符作为元素加入新的数组返回
			strList = str5.split("");
			console.log("'123456'.split('')的结果");
			console.log(strList);
			
			
			var str6 = "台湾是中国不可分割的一部分！";
			// 使用空字符串作为split的参数.对中文的处理结果也和英文字符串一致
			strList = str6.split("");
			console.log("'台湾是中国不可分割的一部分！'.split('')的结果");
			console.log(strList);
			
			
			// 使用空字符串作为split的参数, 并设定split的第二个参数
			// 第二个参数.设定计算结果的数组中保留几个元素,这个数字表示数量
			// 下例为:使用空字符串分隔字符且仅保留3个元素在生成的数组中
			strList = str6.split("", 3);
			console.log("'台湾是中国不可分割的一部分！'.split('', 3)的结果");
			console.log(strList);
			
			// substr可以只指定一个参数.表示从这个索引位置开始截取到字符串结尾
			result = str6.substr(3);
			showString("str6.substr(3)", result);
			// substr可以指定两个参数.
			// 第一个参数表示起始索引位置.第二个参数表示从索引位置开始要截取多少个字符
			result = str6.substr(3, 6);
			showString("str6.substr(3, 6)", result);
			
			// substring可以只指定一个参数.表示从这个索引位置开始截取到字符串结尾
			result = str6.substring(3);
		    showString("str6.substring(3)", result);
			result = str6.substring(3, 6);
			// substring可以指定两个参数.
			// 第一个参数表示起始索引位置.第二个参数也是索引位置，从第一个参数的位置开始要截取第二个参数位置之前
			showString("str6.substring(3, 6)", result);
			
			// 全部转为小写
			result = str1.toLowerCase();
			showString("str1.toLowerCase()", result);
			result = str1.toUpperCase();
			// 全部转为大写
			showString("str1.toUpperCase()", result);
		</script>
	</body>
</html>
